<route lang="json5">
{
  style: {
    navigationBarTitleText: '添加账单',
  },
}
</route>
<template>
  <view>
    <wd-tabs v-model="tab" swipeable animated custom-class="top-tap-bar">
      <block v-for="config in allBillConfig" :key="config.name">
        <wd-tab :title="`${config.name}`">
          <view class="category_content">
            <CsBtnGrid :items="config.typeList" @click="categoryClick"></CsBtnGrid>
          </view>
        </wd-tab>
      </block>
    </wd-tabs>
    <view>
      <SubCategorySheet
        :show="subCategoryActionSheet.show"
        :items="subCategoryActionSheet.items"
        @close="categorySheetClose"
      />
    </view>
  </view>
</template>

<script lang="ts" setup>
import CsBtnGrid from '@/components/cs-btn-grid/cs-btn-grid.vue'
import SubCategorySheet from './components/sub-category-sheet/sub-category-sheet.vue'
import { CsGridItem } from '@/components/cs-btn-grid/cs-btn-grid.types'

defineOptions({
  name: 'AddBill',
})

// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync()

const tab = ref<number>(0)

const subCategoryActionSheet = ref<{
  show: boolean
  items?: CsGridItem[]
}>({ show: false })

const allBillConfig = ref<
  {
    name: string
    typeList: CsGridItem[]
  }[]
>([
  {
    name: '支出',
    typeList: [
      {
        title: '餐饮',
        icon: 'eat-west',
        iconPrefix: 'tn-icon',
        // size: '22',
        children: [
          {
            title: '火锅',
            icon: 'eat-west',
            iconPrefix: 'tn-icon',
          },
        ],
      },
      {
        title: '交通',
        icon: 'taxi',
        iconPrefix: 'tn-icon',
        // children: []
      },
      {
        title: '购物',
        icon: 'paperbag',
        iconPrefix: 'tn-icon',
        // children: []
      },
      {
        title: '住宿',
        icon: 'bed',
        iconPrefix: 'tn-icon',
        // children: []
      },
      {
        title: '日常',
        icon: 'bed',
        iconPrefix: 'tn-icon',
        // children: []
      },
      {
        title: '日常',
        icon: 'bed',
        iconPrefix: 'tn-icon',
        // children: []
      },
      {
        title: '日常',
        icon: 'bed',
        iconPrefix: 'tn-icon',
        // children: []
      },
    ],
  },
  {
    name: '收入',
    typeList: [
      {
        title: '工资',
        icon: 'money',
        iconPrefix: 'tn-icon',
      },
    ],
  },
])

const categoryClick = (item: CsGridItem) => {
  console.log('categoryClick', item.children)

  // find(allBillConfig.value, (config) => isEqual(item, config.typeList)).selected = true

  // show subcategory bottom action sheet
  subCategoryActionSheet.value = {
    show: item.children?.length > 0,
    items: item.children,
  }
}

const categorySheetClose = (item: CsGridItem) => {
  subCategoryActionSheet.value.show = false
}
</script>

<style lang="scss" scoped>
.category_content {
  text-align: center;
}
</style>
